<template>
  <div>
    <div class="wrapper" v-if="houseData">
      <div class="share_conet" v-if="isShare">
        <van-image :src="user.wechatHeadImg" width="40" height="40">
        </van-image>
        <span>
          {{user.username}}
        </span>
        <span>
          {{user.mobile}}
        </span>
      </div>
      <section class="topBanner">
        <van-swipe class="home-swiper-container" :autoplay="5000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in houseData.housePhotos ? houseData.housePhotos.split('、') : []" :key="index">
            <img :src="item + '?imageView2/2/w/750/h/750'"  @click="imagePreview(houseData.housePhotos.split('、'), index)" @error="_loadError($event)" style="width:100%;height:50vw;object-fit:cover;"  @touchmove="moved = true" @touchstart="moved = false">
            <!-- <van-image :src="item" width="100%" height="50vw" fit="cover" @click="imagePreview(item)">
              <template v-slot:error>加载失败</template>
            </van-image> -->
          </van-swipe-item>
        </van-swipe>
      </section>
      <div class="houseContainer">
        <div class="panel">
          <div class="title">{{houseData.title}}</div>
          <div class="line">
            <div class="icon-tab" v-for="(item, index) in houseData.houseAdvantage.split('、').filter(item => item != '')" :key="index">
              {{item}}
            </div>
          </div>
          <div class="line red" v-if="type === 1">均价:{{houseData.unitPrice}}/㎡</div>
          <div class="line red" v-if="type === 2"><b>总价:</b> {{houseData.totalPrice}}万</div>
          <div class="line red" v-if="type === 3"><b>价格:</b> {{houseData.totalPrice}}元/月 <span><b>押金方式:</b> {{houseData.cash}}</span></div>
        </div>
      </div>
      <div class="ruleTab">
        <div class="titleUnder"><span></span>楼盘介绍</div>
        <div class="descripe" v-html="houseData.activityNew">{{houseData.activityNew}}</div>
        <div class="panel">
          <div class="line" v-if="type === 1"><b>开发商:</b> {{houseData.developname}}</div>
          <div class="line" v-if="type !== 1"><b>户型:</b> {{houseData.houseTypeDetail}} <span><b>楼层:</b> {{houseData.floorLocation}}/{{houseData.floorTotal}}层</span></div>
          <div class="line" v-if="type !== 1"><b>面积:</b> {{houseData.floorSpace}}㎡ <span class="blue"><b>单价:</b> {{houseData.unitPrice}}/㎡</span> </div>
          <div class="line blue" v-if="type === 1"><b>项目地址:</b> {{houseData.projectAddress}}</div>
          <div class="line"><b>发布时间:</b> {{houseData.publishTime}}</div>
          <div class="line orange"><b>联系电话:</b> <a class="orange" :href="'tel:' + houseData.platformPhone">{{houseData.platformPhone}}<i><img src="~@/assets/images/hailang/dianhua@2x.png" alt=""> </i></a> </div>
          <div class="line orange" v-show="userType === 2"><b>佣金比例:</b> {{houseData.commission}}%</div>
        </div>
        <div class="panel" v-if="type === 1">
          <div class="line"><b>占地面积:</b> {{houseData.floorSpace}}㎡ <div class="right"><b>建设面积:</b> {{houseData.constructionSpace}}㎡</div></div>
          <div class="line"><b>容积率:</b> {{houseData.plotratio}} <div class="right"><b>绿化率:</b> {{houseData.greeningrate}}</div></div>
          <div class="line"><b>开盘时间:</b> {{houseData.openTime}} <div class="right"><b>入住时间:</b> {{houseData.checkinTime}}</div></div>
          <div class="line blue" style="margin-top: 5px;"><b>项目特色:</b> {{houseData.protectFeature}}</div>
          <div class="line blue"><b>所属学区:</b> {{houseData.schoolIn}}</div>
          <div class="line blue"><b>附近交通:</b> {{houseData.transportationNear}}</div>
          <div class="line" v-if="houseData.equity"><b>产权:</b> {{houseData.equity}}</div>
          <div class="line" v-if="houseData.property"><b>物业:</b> {{houseData.property}}</div>
          <div class="line" v-if="houseData.propertyFee"><b>物业费用:</b> {{houseData.propertyFee}}</div>
        </div>
        <div class="panel" v-if="type !== 1">
          <div class="line"><b>朝向:</b> {{houseData.orientation}}</div>
          <div class="line"><b>小区名称:</b> {{houseData.plotIn}}</div>
          <div class="line"><b>小区地址:</b> {{houseData.projectAddress}}</div>
          <div class="line"><b>装修情况:</b> {{houseData.fitup}}</div>
          <div class="line"><b>电梯房:</b> {{houseData.lift === 1 ? '电梯房' : '非电梯房'}} <span v-if="type === 3"><b>出租方式:</b> {{houseData.rent === 1 ? '整租' : '合租'}}</span></div>
          <div class="line"><b>相关配套:</b> {{houseData.protectFeature}}</div>
          <div class="line"><b>看房时间:</b> {{houseData.lookTime}}</div>
          <div class="line" v-if="type === 3"><b>入住时间:</b> {{houseData.checkinTime}}</div>
          <div class="line blue"><b>所属学区:</b> {{houseData.schoolIn}}</div>
          <div class="line blue"><b>附近交通:</b> {{houseData.transportationNear}}</div>
          <div class="line" v-if="houseData.equity"><b>产权:</b> {{houseData.equity}}</div>
          <div class="line" v-if="houseData.property"><b>物业:</b> {{houseData.property}}</div>
          <div class="line" v-if="houseData.propertyFee"><b>物业费用:</b> {{houseData.propertyFee}}</div>
        </div>
      </div>
      <div class="houseType">
        <div class="titleUnder"><span></span>楼盘户型</div>
        <van-grid :border="false">
          <van-grid-item @click="imagePreview(houseData.houseTypePhotos.split('、'), index)"
            v-for="(item, index) in houseData.houseTypePhotos ? houseData.houseTypePhotos.split('、') : []" :key="index"
          >
            <img :src="item + '?imageView2/2/w/750/h/750'" style="width:60px; height:60px; object-fit: cover;" @error="_loadError($event)">
            <!-- <van-image :src="item" fit="contain" /> -->
          </van-grid-item>
        </van-grid>
      </div>
      <div class="ruleTab" v-if="type === 1">
        <div class="titleUnder"><span></span>最新活动</div>
        <div class="descripe" v-html="houseData.activityNew">{{houseData.activityNew}}</div>
      </div>
      <div class="ruleTab" v-if="type === 1">
        <div class="titleUnder"><span></span>楼盘详情</div>
        <div class="descripe" v-html="houseData.houseDetail">{{houseData.houseDetail}}</div>
      </div>
      <div class="ruleTab" v-if="type !== 1">
        <div class="titleUnder"><span></span>房屋详情</div>
        <div class="descripe" v-html="houseData.houseDetail"></div>
      </div>
      <div class="ruleTab"  v-if="userType === 2">
        <div class="titleUnder"><span></span>分佣规则</div>
        <div class="descripe" v-html="houseData.commissionRule">{{houseData.commissionRule}}</div>
      </div>
      <div class="ruleTab" v-if="userType === 2">
        <div class="titleUnder"><span></span>带看规则</div>
        <div class="descripe" v-html="houseData.handRule">{{houseData.handRule}}</div>
      </div>
      <div class="ruleTab" v-if="userType === 2">
        <div class="titleUnder"><span></span>结佣规则</div>
        <div class="descripe" v-html="houseData.commissionSetRule">{{houseData.commissionSetRule}}</div>
      </div>
    </div>
    <div class="floatNav" v-if="userType === 2 && !shareUser">
      <div @click="toArrive('report')" class="floatImg">
        <img src="~@/assets/images/hailang/house_button_01.png">
      </div>
      <div @click="toArrive('visit')" class="floatImg">
        <img src="~@/assets/images/hailang/house_button_02.png">
      </div>
      <div @click="isShare = !isShare" class="floatImg">
        <img src="~@/assets/images/hailang/house_button_03.png">
      </div>
      <div @click="toArrive('order')" class="floatImg">
        <img src="~@/assets/images/hailang/house_button_04.png">
      </div>
      <!-- <div @click="toArrive('visit')" class="floatTab">带看</div> -->
      <!-- <div @click="isShare = !isShare" class="floatTab">{{isShare ? '取消' : '分享'}}</div> -->
      <!-- <div @click="toArrive('order')" class="floatTab">成交</div> -->
    </div>
    <div class="footer" v-if="!shareUser">
      <div @click="addCollection" class="footerTab">{{ (houseData && houseData.collected) ? '已收藏' : '收藏'}}</div>
      <div class="footerTab" v-if="userType === 2">{{(houseData && houseData.commissioned) ? '已分佣' : '未分佣'}}</div>
      <div @click="toMap" class="footerTab">地图导航</div>
      <div @click="toArrive('appoint')" class="footerTab">预约看房</div>
    </div>
    <div class="footer footerShare" v-else>
      <div class="imgBox">
        <van-image :src="shareUser.wechatHeadImg" width="40" height="40">
        </van-image>
      </div>
      <span>
        {{shareUser.username}}
      </span>
      <small>
        {{shareUser.mobile}}
      </small>
      <a :href="'tel:' + shareUser.mobile">免费致电</a>
    </div>
  </div>
</template>

<script>
import { mineApi } from '@/api'
import { ImagePreview } from 'vant'
import AppUtils from '@/utils/AppUtils'
import { mapGetters } from 'vuex'
export default {
  components: {
  },
  async created() {
    // this.$toast.loading({
    //   duration: 0, // 持续展示 toast
    //   forbidClick: true, // 禁用背景点击
    //   loadingType: 'spinner',
    //   message: '加载中'
    // })
    if (this.$route.query.share_mobile) {
      const resUser = await mineApi.detailByMobile({ mobile: this.$route.query.share_mobile }).catch(err => console.log(err)) // this.$route.query.id
      this.shareUser = resUser.data
    }
    const res = await mineApi.getBookInfo({ id: this.$route.query.id }) // this.$route.query.id
    // this.$toast.clear()
    this.houseData = res.data
    this.type = this.houseData.type
    console.log('this.type', this.type)
    const shareData = {
      title: this.houseData.title, // 分享标题
      imgUrl: '', // this.houseData.housePhotos.split('、')[0], // 分享图标
      desc: this.houseData.address // 分享描述
    }
    if (AppUtils.getPlatFrom === 'ios') {
      shareData.link = window.location.href.split('#')[0] + '#' + window.location.href.split('#')[1] // 分享链接
    } else {
      shareData.link = location.origin + location.pathname + '?from=singlemessage#' + this.$route.fullPath // 分享链接
    }

    if (this.userType === 2) {
      // shareData.link += `&share_user=${this.user.username}&share_mobile=${this.user.mobile}&share_head=${this.user.wechatHeadImg}`
      shareData.link += `&share_mobile=${this.user.mobile}`
    }
    setTimeout(() => {
      AppUtils.ShareTimeline(shareData)
    }, 500)
    setTimeout(() => {
      AppUtils.ShareTimeline(shareData)
    }, 3500)
  },
  mounted() {
  },
  computed: {
    userType() {
      return this.user.userType
    },
    ...mapGetters([
      'token',
      'user'
    ])
  },
  data() {
    return {
      isShare: false,
      houseData: null,
      readRecordData: {},
      move: false,
      nowSelect: 1,
      shareUser: null,
      isReverse: false,
      sectionList: [],
      type: 0, // 1=新房，2=二手房，3=出租房
      total: 0,
      mapKey: 'XJDBZ-J7GCW-EKVRJ-OK7JB-POYK2-QHBN6',
      isCollect: false,
      lastSection: null
    }
  },
  methods: {
    toMap() {
      // if (AppUtils.isWechat()) {
      //   AppUtils.wx.openLocation({
      //     latitude: this.houseData.latitude, // 纬度，浮点数，范围为90 ~ -90
      //     longitude: this.houseData.longitude, // 经度，浮点数，范围为180 ~ -180。
      //     name: this.houseData.title, // 位置名
      //     address: this.houseData.projectAddress, // 地址详情说明
      //     scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
      //     infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
      //   })
      // } else {
      let url = 'https://apis.map.qq.com/tools/poimarker?type=0'
      url += `&marker=coord:${this.houseData.longitude},${this.houseData.latitude};title:${this.houseData.title};addr:${this.houseData.projectAddress}`
      url += `&key=${this.mapKey}&referer=hailangapp`
      location.href = url
      // }
    },
    toArrive(arrive) {
      this.$router.push({
        path: `/detail/${arrive}`,
        query: {
          id: this.$route.query.id
        }
      })
    },
    async getCollectionState() {
      const res = await mineApi.checkedCollection({
        id: this.$route.query.id
      })
      this.isCollect = res.data
    },
    imagePreview(url, index) {
      if (this.moved === true) {
        this.moved = false
        return
      }

      ImagePreview({
        images: url.map(item => item + '?imageView2/2/w/750/h/750'),
        startPosition: index
      })
    },
    async addCollection() {
      let res = ''
      if (!this.houseData.collected) {
        res = await mineApi.addCollection({
          houseId: this.$route.query.id
        })
      } else {
        res = await mineApi.deleteCollection({
          houseId: this.$route.query.id
        })
      }
      if (res.code === 200) {
        this.houseData.collected = !this.houseData.collected
        this.$toast(this.houseData.collected ? '收藏成功' : '取消收藏成功')
      }
    },
    async toComicDetail(item) {
      console.log('item', item)
      this.$router.push({
        path: '/detail/comic',
        query: {
          id: item.id
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/assets/css/mixin.scss";
@import 'src/assets/css/variables.scss';
  .wrapper {
    background: #fafafa;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    line-height: 20px;
    overflow: hidden;
    position: relative;
    padding-bottom: 50px;
    .houseContainer{
      background-color: #fff;
      box-shadow: 2px 2px 5px $color-border;
      margin-bottom: 10px;
    }
    .panel{
      padding: 10px 0;
      margin: 0 10px;
      border-bottom: 1px solid $color-border;
      &:nth-last-child(1) {
        border: none;
      }
    }
    .title{
      font-size: 16px;
      font-weight: bold;
      color: black;
      margin-bottom: 10px;
    }
    .line{
      line-height: 22px;
      color: #666;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      font-size: 14px;
      position: relative;
      .icon-tab{
        background-color: #41c5f7;
        color: white;
        border-radius: 5px;
        display: inline-block;
        padding: 0 5px;
        font-size: 12px;
        margin-right: 5px;
        margin-bottom: 5px;
      }
      .right{
        position: absolute;
        min-width: 40vw;
        top: 0;
        right: 10px;
        margin-left: 5px;
      }
      b{
        font-weight: bold;
        color: #333;
        margin-right: 3px;
      }
      a{
        display: flex;
        align-items: center;
      }
      span{
        position: absolute;
        right: 0px;
      }
      i{
        // position: absolute;
        right: 10px;
        display: flex;
        align-items: center;
        margin-left: 5px;
        img{
          width: 15px;
        }
      }
    }
    .blue{
      color: #5cb5f2;
    }
    .orange{
      color: orange;
    }
    .red{
      color: #ff5152;
      font-size: 17px;
    }
    .houseType{
      background-color: #fff;
      padding: 10px;
      margin-bottom: 10px;
    }
    .titleUnder{
      color: black;
      font-size: 18px;
      display: flex;
      padding-bottom: 10px;
      border-bottom: 1px solid $color-border;
      span{
        background-color: orange;
        display: block;
        width: 5px;
        height: 20px;
        margin-right: 10px;
      }
    }
    .ruleTab{
      padding: 10px;
      background-color: #fff;
      box-shadow: 2px 2px 5px $color-border;
      margin-bottom: 10px;
    }
    .descripe{
      margin-top: 10px;
      line-height: 22px;
      color: #666;
      font-size: 14px;
    }
    /*background-color: #000;*/
  }
  .floatNav{
    position: fixed;
    bottom: 60px;
    right: 0;
    display: flex;
    align-items: center;
    .floatTab{
      border-radius: 50%;
      background-color: rgba(80,80,80,0.5);
      font-size: 14px;
      text-align: center;
      height: 45px;
      width: 45px;
      color: white;
      line-height: 45px;
      margin-right: 10px;
    }
    .floatImg{
      img{
        width: 45px;
        height: 45px;
        margin-right: 10px;
      }
    }
  }
  .share_conet{
    height: 50px;
    align-items: center;
    padding: 0 10px;
    background-color: #fff;
    display: flex;
    span{
      margin-left: 10px;
    }
  }
  .footer{
    position: fixed;
    bottom: 0;
    box-shadow: 0px -1px 5px #eee;
    left: 0;
    height: 50px;
    display: flex;
    width: 100%;
    align-items: center;
    .footerTab{
      flex: 1;
      text-align: center;
      line-height: 50px;
      background-color: #fff;
      font-size: 14px;
      &:nth-last-child(2) {
        color: #1da2fd;
      }
      &:nth-last-child(1) {
        color: orange;
      }
    }
  }
  .footerShare{
    background-color: #fff;
    span{
      font-weight: bold;
      font-size: 16px;
      margin-right: 10px;
    }
    small{
      font-size: 16px;
      margin-right: 10px;
    }
    .imgBox{
      margin: 0 10px;
    }
    a{
      color: white;
      position: absolute;
      right: 20px;
      top: 0;
      background-color: #1da2fd;
      font-size: 14px;
      height: 32px;
      width: 80px;
      top: 9px;
      line-height: 32px;
      text-align: center;
      border-radius: 5px;
    }
  }
</style>
